import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:furaha_mkopo/commonTool/fm_color_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_jump_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_language_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_route_tool.dart';
import 'package:furaha_mkopo/commonTool/fm_screen_tool.dart';
import 'package:furaha_mkopo/commonUI/fm_life_visibility_page.dart';
import 'package:furaha_mkopo/commonUI/fm_refresh_header.dart';
import 'package:get/get.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import '../home/fm_home_detail_page.dart';
import '../order/fm_order_page.dart';
import 'fm_me_controller.dart';

class FMMePage extends StatefulWidget {
  const FMMePage({super.key});

  @override
  State<FMMePage> createState() => _FMMePageState();
}

class _FMMePageState extends State<FMMePage> {

  final controller = Get.put(FMMeController());

  @override
  Widget build(BuildContext context) {
    return FMLifeVisibilityPage(
      parentContext: context,
      child: GetBuilder<FMMeController>(builder: (controller) {
        return Container(
            decoration: BoxDecoration(
              color: FMColorTool.color("#DFFFD6"),
              image: const DecorationImage(
                image: AssetImage("assets/me/me_bg.png"),
                fit: BoxFit.cover,
              ),
            ),
          child: Column(
            children: [
              SizedBox(height: FMScreenTool.appBarHeight(context)),
              Expanded(
                child: SmartRefresher(
                  controller: controller.refreshController,
                  enablePullDown: true,
                  enablePullUp: false,
                  header: const FMRefreshHeader(),
                  onRefresh: (){
                    controller.refreshData();
                  },
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        _topAvatarWidget(),
                        _orderListWidget(),
                        _identifyWidget(),
                        _functionWidget(),
                      ],
                    ),
                  ),
                ),
              )
            ],
          ),
        );
      }),
      viewWillAppear: () {
        controller.refreshData();
      },
    );
  }

  Widget _topAvatarWidget() {
    return Container(
      height: 60,
      padding: const EdgeInsets.only(left: 20),
      child: Row(
        children: [
          Image.asset(
            "assets/me/me_avatar.png",
            width: 60,
            height: 60,
          ),
          const SizedBox(width: 10),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                controller.phone,
                style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: FMColorTool.blackColor),
              ),
              const SizedBox(height: 4),
              Text(
                FMLanguageTool.getText("Welcome to Furaha Mkopo ！"),
                style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: FMColorTool.color("#666666")),
              )
            ],
          )
        ],
      ),
    );
  }

  Widget _orderListWidget() {
    return Container(
      height: 258,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/me/me_order_bg.png'),
          fit: BoxFit.cover,
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.only(top: 41, left: 30, right: 30),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              FMLanguageTool.getText("My Orders"),
              style: TextStyle(
                  fontSize: 18,
                  color: FMColorTool.blackColor,
                  fontWeight: FontWeight.w700),
            ),
            const SizedBox(height: 6),
            Text(
              FMLanguageTool.getText("Real-time synchronization,view the latest order status at any time."),
              style: TextStyle(
                  fontSize: 14,
                  color: FMColorTool.color("#666666"),
                  fontWeight: FontWeight.w500),
            ),
            const SizedBox(height: 10),
            Row(
              children: controller.orderNames.map((e) {
                int index = controller.orderNames.indexOf(e);
                return GestureDetector(
                  onTap: (){
                    FMRouteTool.push(
                      context,
                      FMOrderPage(index: index,isIdentify: controller.isIdentify)
                    );
                  },
                  child: Container(
                    width: (FMScreenTool.width(context) - 60 - 15) / 4,
                    height: 74,
                    margin: EdgeInsets.only(right: index == 3 ? 0 : 5),
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(
                            'assets/me/${controller.orderImageNames[index]}.png'),
                        fit: BoxFit.cover,
                      ),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                            'assets/me/${controller.orderImageIconNames[index]}.png',
                            width: 36,
                            height: 36),
                        const SizedBox(height: 2),
                        Padding(
                          padding: const EdgeInsets.only(left: 6, right: 6),
                          child: AutoSizeText(
                            e,
                            maxFontSize: 13,
                            minFontSize: 10,
                            maxLines: 1,
                            style: TextStyle(
                                fontSize: 13,
                                color: FMColorTool.blackColor,
                                fontWeight: FontWeight.w600),
                          ),
                        )
                      ],
                    ),
                  ),
                );
              }).toList(),
            )
          ],
        ),
      ),
    );
  }

  Widget _identifyWidget() {
    return GestureDetector(
      onTap: (){
        jumpIdentify();
      },
      child: Transform.translate(
        offset: const Offset(0, -30),
        child: Image.asset(controller.identityImageName,
            fit: BoxFit.cover, height: 98),
      ),
    );
  }

  Widget _functionWidget() {
    return Transform.translate(
      offset: const Offset(0, -14),
      child: Container(
          height: 397,
          width: FMScreenTool.width(context) - 32,
          margin: const EdgeInsets.only(left: 16,right: 16),
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/me/me_function_bg.png"),
              fit: BoxFit.cover,
            ),
          ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 16,left: 16),
              child: Text(
                FMLanguageTool.getText("More functions"),
                style: TextStyle(
                  fontSize: 16,
                  fontWeight: FontWeight.w700,
                  color: FMColorTool.blackColor
                ),
              ),
            ),
            const SizedBox(height: 32),
            Container(
              width: FMScreenTool.width(context) - 56,
              height: 234,
              margin: const EdgeInsets.only(left: 12),
              child: GridView.builder(
                  physics: const NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.zero,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 3,
                    mainAxisExtent: 112,
                    mainAxisSpacing: 8,
                    crossAxisSpacing: 10,
                  ),
                  itemCount: controller.functionCount,
                  itemBuilder: (context, index) {
                    return GestureDetector(
                      onTap: (){
                        FMJumpTool.jumpWidget(context: context,url: controller.functionUrlAtIndex(index));
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image:AssetImage("assets/me/${ controller.functionImageNames[index]}.png"),
                            fit: BoxFit.cover,
                          )
                        ),
                        child: Column(
                          children: [
                            const SizedBox(height: 20),
                            SizedBox(
                              width: 36,
                              height: 36,
                              child: Image.network(
                                controller.functionImageNameAtIndex(index),
                                width: 36,
                                height: 36,
                                fit: BoxFit.cover,
                                errorBuilder: (context,ob,stack){
                                  return Container();
                                },
                              ),
                            ),
                            const SizedBox(height: 4),
                            Padding(
                              padding: const EdgeInsets.only(left: 8,right: 8),
                              child: Text(
                                controller.functionNameAtIndex(index),
                                textAlign: TextAlign.center,
                                style: TextStyle(
                                  fontSize: 14,
                                  fontWeight: FontWeight.w500,
                                  color: FMColorTool.blackColor
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    );
                  }),
            ),
            const SizedBox(height: 14),
            Container(
              width: FMScreenTool.width(context) - 56,
              height: 65,
              margin: const EdgeInsets.only(left: 12),
              decoration: const BoxDecoration(
                  image: DecorationImage(
                    image:AssetImage("assets/me/me_version_bg.png"),
                    fit: BoxFit.cover,
                  )
              ),
              child: Row(
                children: [
                  const SizedBox(width: 16),
                  Image.asset("assets/me/me_version_icon.png",width: 36,height: 36,),
                  const SizedBox(width: 12),
                  Text(
                    "${FMLanguageTool.getText("Version")}:${controller.appVersion}",
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w700,
                      color: FMColorTool.color("#4D2F00")
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      )
    );
  }

  void jumpIdentify() {
    if (controller.isIdentify) {
      FMRouteTool.push(context,FMHomeDetailPage(listen:""));
    }else {
      FMJumpTool.jumpHomeWidget();
    }
  }
}
